<template>
  <span :class="badgeClass">
    <slot />
  </span>
</template>

<script>
export default {
  name: 'Badge',
  props: {
    variant: {
      type: String,
      default: 'default', // 'default', 'secondary', 'destructive', 'outline'
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    badgeClass() {
      const base = 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2';
      const variants = {
        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
        outline: 'text-foreground',
      };
      return `${base} ${variants[this.variant]} ${this.className}`;
    },
  },
};
</script>

<style scoped>
/* Define colors if not globally available via Tailwind config */
.bg-primary { background-color: #3b82f6; /* blue-500 */ }
.text-primary-foreground { color: #ffffff; }
.hover\:bg-primary\/80:hover { background-color: #2563eb; /* blue-600 */ }

.bg-secondary { background-color: #e2e8f0; /* gray-200 */ }
.text-secondary-foreground { color: #1f2937; /* gray-800 */ }
.hover\:bg-secondary\/80:hover { background-color: #cbd5e1; /* gray-300 */ }

.bg-destructive { background-color: #ef4444; /* red-500 */ }
.text-destructive-foreground { color: #ffffff; }
.hover\:bg-destructive\/80:hover { background-color: #dc2626; /* red-600 */ }

.text-foreground { color: #020817; /* gray-900 */ }
</style>
